import { EmblemProps } from 'pages/Portfolio/components/AnimatedStyledBanner/Emblems/types'
import { useSporeColors } from 'ui/src'

export function EmblemF({ fill = '#FF37C7', opacity = 1, ...props }: EmblemProps): JSX.Element {
  const colors = useSporeColors()

  return (
    <svg width="67" height="67" viewBox="0 0 67 67" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M26.3303 59.7769C11.8818 55.9054 3.30734 41.054 7.17882 26.6054C11.0503 12.1569 25.9017 3.58243 40.3502 7.45392C54.7988 11.3254 63.3733 26.1768 59.5018 40.6253C55.6303 55.0739 40.7789 63.6484 26.3303 59.7769ZM37.7215 17.2645C35.4639 16.6596 33.1434 17.9993 32.5385 20.2569C31.3286 24.7721 26.6876 27.4516 22.1724 26.2418C19.9148 25.6368 17.5943 26.9766 16.9894 29.2342C16.3845 31.4918 17.7242 33.8123 19.9818 34.4172C24.497 35.6271 27.1765 40.2681 25.9667 44.7833C25.3617 47.0409 26.7015 49.3614 28.9591 49.9663C31.2167 50.5712 33.5372 49.2315 34.1421 46.9739C35.352 42.4587 39.993 39.7792 44.5082 40.989C46.7658 41.594 49.0863 40.2542 49.6912 37.9966C50.2961 35.739 48.9564 33.4185 46.6988 32.8136C42.1836 31.6037 39.5041 26.9627 40.7139 22.4475C41.3189 20.1899 39.9791 17.8694 37.7215 17.2645Z"
        fill={colors.surface1.val}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M26.3303 59.7769C11.8818 55.9054 3.30734 41.054 7.17882 26.6054C11.0503 12.1569 25.9017 3.58243 40.3502 7.45392C54.7988 11.3254 63.3733 26.1768 59.5018 40.6253C55.6303 55.0739 40.7789 63.6484 26.3303 59.7769ZM37.7215 17.2645C35.4639 16.6596 33.1434 17.9993 32.5385 20.2569C31.3286 24.7721 26.6876 27.4516 22.1724 26.2418C19.9148 25.6368 17.5943 26.9766 16.9894 29.2342C16.3845 31.4918 17.7242 33.8123 19.9818 34.4172C24.497 35.6271 27.1765 40.2681 25.9667 44.7833C25.3617 47.0409 26.7015 49.3614 28.9591 49.9663C31.2167 50.5712 33.5372 49.2315 34.1421 46.9739C35.352 42.4587 39.993 39.7792 44.5082 40.989C46.7658 41.594 49.0863 40.2542 49.6912 37.9966C50.2961 35.739 48.9564 33.4185 46.6988 32.8136C42.1836 31.6037 39.5041 26.9627 40.7139 22.4475C41.3189 20.1899 39.9791 17.8694 37.7215 17.2645Z"
        fill={fill}
        opacity={opacity}
      />
    </svg>
  )
}
